import React, {
    useState,
} from "react";
import {Modal} from "antd";
import "./index.scss";
/**
 * 传参：
 * visible: 控制显隐
 * title: 主文字，如果包含含有类.important的标签，则文字变黄
 * smallTitle: 小文字
 * onOk: 点击确定执行的函数
 * onCancel: 点击取消以及关闭按钮执行的函数
 */
function MyAlert(props) {
    let {
        visible,
        title,
        smallTitle,
        onOk,
        onCancel,
        className,
        data,
        style,
        type
    } = props;
    const confirm = () => {
        onOk();
    }
    const close = () => {
        onCancel(); 
    }
    return (
        <Modal
        visible={visible}
        destroyOnClose={true}
        title={null}
        footer={null}
        centered={true}
        closable={true}
        className="my_alert_modal"
        closeIcon={<i className="closelogo" onClick={close}></i>}
        width={440}
        zIndex={3000}
        bodyStyle={{height: 232}}
        >
            <div className={`my_alert ${className? className: ""}`} style={{...style}}>
                <i className="alertlogo" style={{
                    marginTop: (smallTitle? "": 25)
                }}></i>
                {
                    title === "delete"?
                    <p className="alert_title" title={`确定要删除${data}吗？`}>
                        确定要删除
                        <span className="important">{data}</span>
                        吗？
                    </p>:
                    title === "recallAndDelete"?
                    <p className="alert_title" title={`确定要撤回并删除${data}吗？`}>
                        确定要撤回并删除
                        <span className="important">{data}</span>
                        吗？
                    </p>:
                    title === "recall"?
                    <p className="alert_title" title={`确定要撤回${data}吗？`}>
                        确定要撤回
                        <span className="important">{data}</span>
                        吗？
                    </p>:
                    <p className="alert_title" title={title}>{title}</p>
                }
                <p className="alert_small">{smallTitle}</p>
                <div className="btn_group">
                    <div className="ok_btn" onClick={confirm}>确定</div>
                    <div className="cancel_btn" onClick={close}>再想想</div>
                </div>
            </div>
        </Modal>
        
    )
}
  
export default MyAlert;
  